<template>
  <div id="silderimg" :style="SliderImgStyle">
    <div
      class="sliderbox"
      ref="sliderbox"
      :style="TransFormStyle"
      style="transform: translateX()"
    >
      <img v-for="(i, index) in imgarr" :key="index"  :src="i" alt="" />
    </div>
    <div
      id="slidericon"
      :style="SliderIconStyle"
      @mouseenter="CloseTimer()"
      @mouseleave="OpenTimer()"
    >
      <div
        class="silderitembox"
        v-for="(i, index) in imgarr"
		:key="index"
        @click="TpImg(index)"
		v-show="false"
      >
        <div
          class="slideritem"
          :class="{ slideritemactive: NowImglength === index }"
        ></div>
      </div>
    </div>
    <div id="mouse-xia">
      <img src="@/assets/img/icon/bottom.svg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "silderimg",
  data() {
    return {
      Start: 0,
      Imglength: 0,
      NowImglength: 0,
      ImgTimer: "",
      refresh: 0,
    };
  },
  props: {
    imgarr: {
      type: Array,
      default: () => {},
    },
    BoxWidth: {
      type: Number,
      default: 100,
    },
    BoxHeight: {
      type: Number,
      default: 100,
    },
    BorderRadius: {
      type: Number,
      default: 0,
    },
    SliderIconWidth: {
      type: Number,
      default: 400,
    },
  },
  mounted() {
    this.Imglength =
      Array.from(document.querySelectorAll(".sliderbox img")).length - 1; //获取有几张Img
    this.ImgTimer = setInterval(this.sliderimg, 10000);
  },
  beforeDestroy() {
    clearInterval(this.ImgTimer);
  },
  methods: {
    sliderimg() {
      if (Math.abs(this.Start) >= this.MaxDistance) {
        this.Start = 0;
      } else {
        this.Start -= this.Distance;
      }
    },
    CloseTimer() {
      clearInterval(this.ImgTimer);
    },
    OpenTimer() {
      this.ImgTimer = setInterval(this.sliderimg, 10000);
    },
    TpImg(index) {
      this.Start = -index * this.Distance;
    },
  },
  computed: {
    TransFormStyle() {
        return {
          transform: ` translateX(${this.Start}px)`,
        };
    },
    SliderImgStyle() {
        return {
          width: this.BoxWidth + "%",
          BorderRadius: this.BorderRadius + "px",
        };
    },
    SliderIconStyle() {
      
        return { width: this.SliderIconWidth + "px" };
      
    },
    Distance() {
     
        return this.$refs.sliderbox.clientWidth; //获取应该移动的距离
      
    },
    MaxDistance() {
      
        return this.Imglength * this.Distance; //计算最大移动距离
      
    },
    NowDistance() {
     
        return this.Distance; //当前现在的距离
      
    },
  },
  watch: {
    Start: function () {
      this.NowImglength = Math.abs(this.Start) / this.Distance;
    },
  },
};
</script>

<style scoped>
#silderimg {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%;
  min-height: 100vh;
  opacity: .5;
}

.sliderbox {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}
#slidericon {
  position: absolute;
  bottom: 2%;
  display: flex;
  z-index: 1000;
  height: 20px;
}
.silderitembox {
  width: 35px;
  height: 20px;
  z-index: 1002;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
#mouse-xia {
  z-index: 201;
  position: absolute;
  bottom: 20%;

  animation: mouseimgmove 1.5s infinite;
}
#mouse-xia img {
  width: 25px;
  cursor: pointer;
}
.slideritem {
  width: 30px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.1s;
}
.silderitembox:hover .slideritem {
  background-color: rgba(255, 255, 255, 0.8);
  height: 6px;
}
.slideritemactive {
  background-color: rgba(255, 255, 255, 0.8);
  height: 6px;
}
.sliderbox img {
  flex-shrink: 0;
  width: 100%;
}
@keyframes mouseimgmove {
  0% {
    bottom: 20%;
  }
  25% {
    bottom: 17%;
  }
  75% {
    bottom: 15%;
  }
  100% {
    bottom: 13%;
  }
}

@media screen and (max-width: 1024px) {
 #mouse-xia{
   display: none;
 }
 #slidericon{
   display: none;
 }
 #silderimg{
   min-height: 500px;
 }
}
</style>
